<!DOCTYPE html>
<html>

<head>

    {include file="Public/header"}
    <style>
        .row {
            margin: 0;
            padding: 0
        }

        .inputremindPeple {
            max-width: 200px;
            height: 20px;
            display: inline-block;
        }
        .renyuan{
            position:absolute;left:0;top:30px;
            z-index:3;
        }
        .renyuan span.ren{
            display: inline-block;
            background:#d0e0e0;border:1px solid #ccc;border-radius:5px;font-size:12px;
        }
        .renyuan span.close{
                font-size: 16px;
                margin-left: 4px;
                line-height: 1.2;
            color:black!important;
        }
    </style>

</head>

<body class="white-bg">
<div class="row white-bg setRemindPeopleK" style="margin:10px">
    <form action="" id="add">
        <div class="form-group">
            <table class="table table-bordered white-bg">
                <tr>
                    <td class="text-right">
                        <label for="remainMan">提醒职员</label><span class="colorRed">*</span>
                    </td>
                    <td colspan="3">
                        <div class="col-xs-4">
                            <div class="input-group">
                                <input name="remainMan" id="testNoBtn" type="text" placeholder="请输入关键字或空格查询"
                                       class="input12 form-control" value="">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                    </ul>
                                </div>
                                <div class="renyuan" id="renyuan">
                                    {if isset($data.stuff)}
                                    {volist name="data.stuff" id="row"}
                                    <span class="ren" data-id="{$row.id}">{$row.em_name}<span class="close"></span></span>
                                    {/volist}
                                    {/if}
                                </div>
                            </div>

                        </div>
                            <a href="javascript:;" id="select" style="vertical-align: bottom;">选择</a>
                            <i class="colorRed" style="font-style: normal;"></i>
                    </td>

                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td colspan="3">&nbsp;</td>
                </tr>
                <tr>
                    <td class="text-right">提醒方式<span class="colorRed">*</span></td>
                    <td colspan="3">
                        <label class="checkbox-inline" for="eamil">
                            <input type="checkbox" id="eamil" name="type[]" value="0" {if isset($data)&&in_array(0,$data.type)}checked{/if} style="margin-top: 2px"> 邮件
                        </label>
                        <label class="checkbox-inline" for="alert">
                            <input type="checkbox" id="alert" value="1" name="type[]" {if isset($data)&&in_array(1,$data.type)}checked{/if} style="margin-top: 2px"> 弹窗
                        </label>
                    </td>
                </tr>
            </table>
            <div class="col-md-12 white-bg" style="padding: 20px 0;text-align: center;">
                <button class="btn btn-success" type="submit" id="tijiao">确定</button>
                <button class="btn btn-danger " id="cancelBack">取消</button>
            </div>
        </div>
    </form>
</div>

<!-- 全局js -->
{include file="Public/footer"}
<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>
<script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
<script>
    var cancelBack = document.getElementById('cancelBack')
    cancelBack.onclick = function () {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
     $('body').on('click','.renyuan span.close',function () {
            $(this).parent('.ren').remove();
        })
    /**
     * touxingren (首次从 URL 获取数据，显示 header，不显示按钮，忽略大小写，可清除)
     */
    $("#testNoBtn").bsSuggest({
        url: "{:url('jxsgl/provicejson')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias: {userName: "姓名"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onDataRequestSuccess', function (e, result) {
        console.log('onDataRequestSuccess: ', result);
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).val('')
        var bool = false
        $('#renyuan .ren').each(function (idx, o) {
            if ($(this).data('id') == keyword.id) {
                bool = true;
            }
        })
        if (bool == false)
            $('#renyuan').append('<span class="ren" data-id="' + keyword.id + '">' + keyword.key + '<span class="close">×</span></span>')
        //console.log('onSetSelectValue: ', keyword, data);
    }).on('onUnsetSelectValue', function () {
        console.log("onUnsetSelectValue");
    });

    //弹窗选择提醒人
    $('#select').on('click', function () {
        var index = layer.getFrameIndex(window.name)
        //iframe层-父子操作
        layer.open({
            type: 2,
            title: '请选择提醒人员',
            area: ['500px', '400px'],
            fixed: false, //不固定
            maxmin: true,
            content: '{:url("jxsgl/selectsalesman")}?frameindex=' + index
        });
        return false
    })

    //提交
    $('#tijiao').on('click',function () {
        var form =  $('#add')
        var serial = form.serialize()

        var admin = []
        $('#renyuan .ren').each(function (idx,o) {
            admin.push($(o).data('id'))
        })
        var admin2 = ''
        if(admin)
            admin2 = admin.join(',')

        serial = serial+'&stuff='+admin2

        $.ajax({
            'type':'post',
            'url':form.attr('action'),
            'data':serial,
            'dataType':'json',
            'success':function (data) {
                if(data.success){
                    swal({
                        title: data.msg,
                        type: "success"
                    },function(){
                        parent.history.go(0)
                    });

                }else
                    swal({
                        title: data.msg,
                        type: "warning"
                    });
            }
        })
        return false
    })

</script>
</body>

</html>